<script setup>
import * as Cesium from "cesium";
import { onMounted } from 'vue';
onMounted(async ()=>{
  var esri = new Cesium.ArcGisMapServerImageryProvider({
    url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
  })
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZDJkNDQwNS02NjkwLTRiMjUtYjIxOC1jNjYwYjU0NWMzMDkiLCJpZCI6MjM3OTc0LCJpYXQiOjE3MjQ5ODY3MTN9.GTM0REWfAJ0a_fmRVCrZNHYvNzxWgAjtw5mFK_n6yDs"
  const viewer = new Cesium.Viewer('cesiumContainer',{
    baseLayerPicker:false,
    imageryLayers:esri,
  });
  viewer.scene.setTerrain(
    new Cesium.Terrain(
      Cesium.CesiumTerrainProvider.fromIonAssetId(1),
    ),
  );
  viewer.camera.setView({
    destination:Cesium.Cartesian3.fromDegrees(116.39,39.91,2000),
    // destination:new Cesium.Cartesian3(1333597.291762958,-4667718.246269587,4147626.344790953),
    orientation:{
      heading:Cesium.Math.toRadians(0),
      pitch:Cesium.Math.toRadians(-90),
      roll:0.0
    }
  })
  const position = new Cesium.Cartesian3.fromDegrees(116.39,39.91,0)
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(position,new Cesium.HeadingPitchRoll(-90,0,0));
  // const entity = viewer.entities.add({
  //   position,
  //   point:{
  //     pixelSize:100,
  //     color:Cesium.Color.RED
  //   }
  // })
  // const entity = viewer.entities.add({
  //   polyline:{
  //     show:true,
  //     positions:new Cesium.Cartesian3.fromDegreesArray([116.39,39.91,116.40,39.91]),
  //     width:10,
  //     material:new Cesium.Color(0,0,1,1)
  //   }
  // })
  const redPoligon = viewer.entities.add({
    id:"redPoligon",
    polygon:{
      hierarchy:new Cesium.PolygonHierarchy(
        Cesium.Cartesian3.fromDegreesArray([
          116.39,39.91,
          116.40,39.91,
          116.40,39.92,
          116.39,39.92
        ])
      ),
      material:Cesium.Color.RED.withAlpha(0.5),
      extrudedHeight:200,
      outline:true,
      outlineColor:Cesium.Color.RED
    },
    description:`<civ>
        <img width="100%" height="300px" src="../public/images/logo.png">
        <h3>123456</h3>
      </civ>`
  })
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
  handler.setInputAction(function (movement) {
    var pick = viewer.scene.pick(movement.position);
    if (Cesium.defined(pick)&&(pick.id.id==='redPoligon')) {
      alert("选中了红色多边形")
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
  // const entity = viewer.entities.add({
  //   position,
  //   ellipsoid:{
  //     radii:new Cesium.Cartesian3(100000,100000,100000),
  //     material:Cesium.Color.RED.withAlpha(0.5),
  //     outline:true,
  //     outlineColor:Cesium.Color.RED
    // }
  // })
  // const entity = viewer.entities.add({
  //   position,
  //   plane:{
  //     plane:new Cesium.Plane(Cesium.Cartesian3.UNIT_Y,0.0),
  //     dimensions:new Cesium.Cartesian2(400,400),
  //     material:Cesium.Color.RED.withAlpha(0.5),
  //     material:"../public/images/logo.png",
  //     outline:true,
  //     outlineColor:Cesium.Color.WHITE
  //   }
    // orientation,
    // model:{
    //   uri:'../public/models/CesiumAir/Cesium_Air.glb',
    //   minimumPixelSize:100,
    //   maximumScale:10000,
    //   show:true
    // }
  // })
  // viewer.trackedEntity = entity
  // viewer.clock.shouldAnimate = true;
  // viewer.clock.multiplier = 1000;
  // let start = Cesium.JulianDate.fromIso8601('2022-01-05');
  // let end = Cesium.JulianDate.fromIso8601('2022-01-20');
  // viewer.timeline.zoomTo(start,end);
})
</script>

<template>
  <div id="cesiumContainer"></div>
</template>

<style scoped>
#cesiumContainer{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
